CustomPainter দিয়ে Custom Drawing এবং Shapes

Flutter এ CustomPainter একটি শক্তিশালী টুল, যা ব্যবহার করে আপনি কাস্টম ড্রইং এবং শেপ তৈরি করতে পারেন। এটি আপনার অ্যাপ্লিকেশনে ডায়নামিক এবং আকর্ষণীয় ভিজ্যুয়াল ইফেক্ট, গ্রাফিক্স, এবং জ্যামিতিক শেপ তৈরি করতে সহায়ক। CustomPainter এর মাধ্যমে আপনি কাস্টমাইজড পেইন্টিং করতে পারেন, যেমন লাইনের কাজ, বৃত্ত, আয়তক্ষেত্র, গ্রেডিয়েন্ট, এবং অন্যান্য শেপ।

CustomPainter ব্যবহার করার প্রধান ধাপসমূহ:

1. CustomPainter ক্লাস তৈরি করা: একটি ক্লাস তৈরি করুন, যা CustomPainter কে এক্সটেন্ড করে।
2. paint() মেথড: এখানে ক্যানভাস এবং পেইন্ট অবজেক্ট ব্যবহার করে আপনার ড্রইং লজিক লিখুন।
3. shouldRepaint() মেথড: এটি বলে দেয় কখন পুনরায় পেইন্ট করা উচিত।
4. CustomPaint Widget: এটি ব্যবহার করে আপনার CustomPainter উইজেটটি Flutter এর উইজেট ট্রিতে যুক্ত করুন।

CustomPainter এর উদাহরণ:

Simple Line Drawing:

import 'package:flutter/material.dart';

class LinePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.blue
      ..strokeWidth = 4.0
      ..style = PaintingStyle.stroke;

    canvas.drawLine(
      Offset(0, size.height / 2),
      Offset(size.width, size.height / 2),
      paint,
    );
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

class LineDrawingExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Line Drawing Example')),
      body: Center(
        child: CustomPaint(
          size: Size(300, 300),
          painter: LinePainter(),
        ),
      ),
    );
  }
}

ব্যাখ্যা:

• LinePainter: CustomPainter কে এক্সটেন্ড করে এবং paint মেথডে ড্রইং লজিক লিখেছে।
• canvas.drawLine: এটি একটি সরল লাইন আঁকে, যেখানে Offset দ্বারা লাইনটির শুরু এবং শেষ পজিশন নির্ধারণ করা হয়েছে।
• shouldRepaint: এখানে false রিটার্ন করে, কারণ এখানে স্ট্যাটিক পেইন্টিং হচ্ছে।

Custom Shape: Circle Drawing:

import 'package:flutter/material.dart';

class CirclePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.green
      ..style = PaintingStyle.fill;

    final center = Offset(size.width / 2, size.height / 2);
    final radius = size.width / 4;

    canvas.drawCircle(center, radius, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

class CircleDrawingExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Circle Drawing Example')),
      body: Center(
        child: CustomPaint(
          size: Size(300, 300),
          painter: CirclePainter(),
        ),
      ),
    );
  }
}

ব্যাখ্যা:

• CirclePainter: একটি বৃত্ত আঁকে এবং সেটি কেন্দ্রবিন্দু থেকে নির্ধারিত ব্যাসার্ধ নিয়ে।
• canvas.drawCircle: এখানে ক্যানভাসের Offset (কেন্দ্র) এবং ব্যাসার্ধ পাস করা হয়েছে।

Custom Shape: Rectangle Drawing:

import 'package:flutter/material.dart';

class RectanglePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.red
      ..style = PaintingStyle.stroke
      ..strokeWidth = 5.0;

    final rect = Rect.fromLTWH(50, 50, size.width - 100, size.height - 100);
    canvas.drawRect(rect, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

class RectangleDrawingExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Rectangle Drawing Example')),
      body: Center(
        child: CustomPaint(
          size: Size(300, 300),
          painter: RectanglePainter(),
        ),
      ),
    );
  }
}

ব্যাখ্যা:

• RectanglePainter: একটি আয়তক্ষেত্র আঁকে, যেখানে Rect.fromLTWH ব্যবহার করা হয়েছে।
• canvas.drawRect: ক্যানভাসে নির্দিষ্ট আকার এবং অবস্থানের রেকটেংগেল তৈরি করা হয়েছে।

Custom Path Drawing:

Flutter এ Path ক্লাস ব্যবহার করে আপনি জটিল শেপ এবং পাথ তৈরি করতে পারেন।

Custom Path (Triangle):

import 'package:flutter/material.dart';

class TrianglePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.orange
      ..style = PaintingStyle.fill;

    final path = Path();
    path.moveTo(size.width / 2, 0);
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);
    path.close();

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

class TriangleDrawingExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Triangle Drawing Example')),
      body: Center(
        child: CustomPaint(
          size: Size(300, 300),
          painter: TrianglePainter(),
        ),
      ),
    );
  }
}

ব্যাখ্যা:

• TrianglePainter: একটি ত্রিভুজ আঁকে, যেখানে Path এবং lineTo ব্যবহার করা হয়েছে।
• canvas.drawPath: ক্যানভাসে পাথ দ্বারা নির্ধারিত ত্রিভুজ আঁকে।

Custom Gradient Drawing:

Flutter এ কাস্টম গ্রেডিয়েন্ট তৈরি করা যায়, যা ব্যাকগ্রাউন্ড বা শেপে ব্যবহার করা যেতে পারে।

Gradient Circle:

import 'package:flutter/material.dart';

class GradientCirclePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final rect = Rect.fromCircle(center: Offset(size.width / 2, size.height / 2), radius: size.width / 2);
    final gradient = RadialGradient(
      colors: [Colors.yellow, Colors.orange, Colors.red],
      stops: [0.0, 0.5, 1.0],
    );

    final paint = Paint()..shader = gradient.createShader(rect);
    canvas.drawCircle(Offset(size.width / 2, size.height / 2), size.width / 2, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

class GradientCircleExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Gradient Circle Example')),
      body: Center(
        child: CustomPaint(
          size: Size(300, 300),
          painter: GradientCirclePainter(),
        ),
      ),
    );
  }
}

ব্যাখ্যা:

• RadialGradient: একটি সার্কুলার গ্রেডিয়েন্ট তৈরি করে, যা কেন্দ্র থেকে বাইরে ছড়ায়।
• shader: পেইন্টের জন্য একটি শেডার তৈরি করা হয়, যা গ্রেডিয়েন্ট হিসেবে সেট করা হয়।

CustomPainter ব্যবহার করার সেরা চর্চা:

1. Performance অপ্টিমাইজ করুন: shouldRepaint মেথডে এমন লজিক ব্যবহার করুন, যা বলে কখন পুনরায় পেইন্ট করা উচিত, যাতে অপ্রয়োজনীয় রিড্রো না হয়।
2. Offscreen Buffer ব্যবহার করুন: RepaintBoundary ব্যবহার করে জটিল ড্রইংগুলোকে পারফরম্যান্স বাফারিং করা যায়।
3. রেসপন্সিভ ডিজাইন: Size অবজেক্ট ব্যবহার করে ড্রইং করলে, এটি ডিভাইসের স্ক্রিন সাইজের সাথে মানানসই হয়।

উপসংহার:

Flutter এ CustomPainter ব্যবহার করে আপনি ডাইনামিক গ্রাফিক্স, জ্যামিতিক শেপ, গ্রেডিয়েন্ট, এবং অন্যান্য কাস্টম ডিজাইন তৈরি করতে পারেন। এটি আপনাকে আপনার অ্যাপ্লিকেশনকে ভিজ্যুয়ালি আকর্ষণীয় এবং ইন্টারেকটিভ করে তুলতে সহায়তা করে, যা ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে।